<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>

<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="<%=basePath%>/components/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<style type="text/css">
.ztree li span.button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle
}

div.content_wrap {
	width: 600px;
	height: 380px;
}

div.content_wrap div.left {
	float: left;
	width: 250px;
}

div.content_wrap div.right {
	float: right;
	width: 340px;
}

div.zTreeDemoBackground {
	width: 250px;
	height: 362px;
	text-align: left;
}
</style>
<script type="text/javascript"
	src="<%=basePath%>/components/jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/components/zTree/js/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript">
	var zTreeObj;
	
	var setting = {
			view: {
				showLine: true,
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom
			},
			check: {
				enable: false,// 是否显示对应的选择框
				chkStyle: "checkbox"
			},
			data: {
				simpleData: {
					enable : true,
					idKey: 'id',
					pIdKey: "parentID",
					rootPId: 0 
				}
			},
			edit: {
				enable: true,
				showRenameBtn: false,
				showRemoveBtn: true,
				renameTitle: "修改",
				removeTitle: "删除",
				drag: {
					autoExpandTrigger: true,
					isMove: true,
					isCopy: true,
					prev: true,
					next: true,
					inner: true
				}
			},
			callback: {
				beforeClick: beforeClickMenu,
				onClick: onClickMenu,
				beforeRemove: beforeMenuRemove,
				onRemove: onMenuRemove
			}
	};
	
	var zNodes  ;
	var treeNodeTemp;
	// 渲染菜单树
	$(document).ready(function(){
		$.ajax({
			url:"<%=basePath%>menu/menuIndex.do",
			type : "get",
			dataType : "json",
			success : function(data) {
				zNodes = eval(data);
				zTreeObj = $.fn.zTree.init($('#treeDemo'), setting, zNodes);
			}
		}).fail(function() {
			alert("加载菜单树数据异常");
		}); 
		$("#showInfo").hide();
		
		var subBtn = $("#subButton");
		if (subBtn)
			subBtn.bind("click", function() {
				// 保存或者修改，根据是否有主键来判断
				saveOrUpdateMenu(treeNodeTemp);
				return false;
			});
	});

	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		
		if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0 )
			return;
		
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='新增子节点' onfocus='this.blur();'></span>";
				
		var editStr = "<span class='button edit' id='editBtn_" + treeNode.tId
				+ "' title='修改子节点' onfocus='this.blur();'></span>";
				
		sObj.after(addStr+editStr);	
				
		var addBtn = $("#addBtn_" + treeNode.tId);
		if (addBtn)
			addBtn.bind("click", function(){
				addOperation(treeNode);
				treeNodeTemp = treeNode;
				return false;
			});
		
		var editBtn = $("#editBtn_" + treeNode.tId);
		if (editBtn)
			editBtn.bind("click", function(){
				editOperation(treeNode);
				treeNodeTemp = treeNode;
				return false;
			});
	}
	
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_" + treeNode.tId).unbind().remove();
		$("#editBtn_" + treeNode.tId).unbind().remove();
	}
	
	// 清除form表单的数据以及操作时提示信息的div的数据
	function clearFormDivData(){
		// 置空菜单各属性
		$("#id").val("");
		$("#parentID").val("");
		$("#name").val("");
		$("#code").val("");
		// 结果提示信息置空
		$("#resultInfo").html("");
	}
	
	// 初始化表单数据
	function initFormData(treeNode){
		$.ajax({
			url: "<%=basePath%>menu/showMenu.do",
			type: 'get',
			data:{'id':treeNode.id},
			dataType: 'json',
			success: function(data){
				// 填充各字段数据
				$("#id").val(data.id);
				$("#parentID").val(data.parentID);
				$("#name").val(data.name);
				$("#code").val(data.code);
			}
		}).fail(function(){
			alert("加载该菜单节点数据出错");
		});
		
	}

	
	function addOperation(treeNode){
		clearFormDivData();
		$("#parentID").val(treeNode.id);
		$("#showInfo").show();
	}
	
	function editOperation(treeNode){
		clearFormDivData();
		initFormData(treeNode);
		$("#parentID").val(treeNode.id);
		$("#showInfo").show();
	}
	
	// 删除前的操作
	function beforeClickMenu(treeId, treeNode){
		$("#showInfo").show();
		clearFormDivData();
		initFormData(treeNode);
	}
	
	function onClickMenu(event, treeId, treeNode){
	}
	
	
	// 删除前的操作
	function beforeMenuRemove(treeId, treeNode){
		$("#showInfo").hide();
		clearFormDivData();
		// 弹出确认框	
	
		return confirm("确定要删除该菜单吗？"); 
	}
	
	function onMenuRemove(event, treeId, treeNode){
		$.ajax({
			url: "<%=basePath%>menu/deleteMenu.do",
			data: {
				'id' : treeNode.id
			},
			type: "post",
			dataType: "json",
			success: function(data){
				alert("删除成功");
				return true;
			}
		}).fail(function(){
			alert("操作异常");
			return false;
		});  
	}
	
	
	function saveOrUpdateMenu(treeNode){
		var name = $("#name").val();
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		
		$.ajax({
			url: "<%=basePath%>menu/saveOrUpdateMenu.do",
			data: {
				'parentID' : $("#parentID").val(),
				'id' : $("#id").val(),
				'code' : $("#code").val(),
				'name' : name
			},
			type: "post",
			dataType: "json",
			success: function(data){
				if($("#id").val() == null || $("#id").val() == ''){
					clearFormDivData();
					$("#showInfo").hide();
					$("#resultInfo").html("新增成功！");
					alert("add:"+treeNode.id);
					zTree.addNodes(treeNode, {
						id : data.id,
						pId : data.parentID,
						name : data.id+"||"+data.parentID+"||"+name
					});
				}else{
					alert("edit:"+treeNode.id);
					treeNode.name = data.id+"||"+data.parentID+"||"+name;
					treeNode.id = data.id;
					treeNode.pId = data.parentID; 
					zTree.updateNode(treeNode);
					clearFormDivData();
					$("#showInfo").hide();
					$("#resultInfo").html("修改成功！");
				}
			}
		}).fail(function(){
			alert("操作异常");
		});
	}
	
	
</script>
</head>
<body>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="right">
			<h2>菜单信息</h2>
			<div id="showInfo">
				<input id="parentID" type="text"></input><br />
				<input id="id" type="text"></input><br />
				<label>编码</label><input id="code" type="text"></input><br />
				<label>名称</label><input id="name" type="text"></input><br />
				<input id="subButton" type="button" value="提交"></input>
			</div>
			<div id="resultInfo">
			</div>
		</div>
	</div>
</body>
</html>